<template>
  <div class="total-people">
    <div class="header-container">
      <dv-decoration-1 style="width: 200px; height: 50px" />
      <div class="header-title">服务老人总数</div>
      <dv-decoration-1 style="width: 200px; height: 50px" />
    </div>

    <div class="total-number">
      <span>老人统计：</span>
      <div class="number">
        <span class="number-item">{{ totalPepleArr[0] || 0 }}</span>
        <span class="number-item">{{ totalPepleArr[1] || 0 }}</span>
        <span class="number-item">{{ totalPepleArr[2] || 0 }}</span>
        <span class="number-item">{{ totalPepleArr[3] || 0 }}</span>
      </div>
    </div>

    <!-- 性别 -->
    <div class="gender">
      <div class="gender-label">性别比例</div>
      <div class="gender-content">
        <div class="gender-item">
          <div class="gender-title">男</div>
          <div class="gender-number">{{ male }}</div>
          <dv-percent-pond
            :config="maleConfig"
            style="width: 200px; height: 30px"
          />
        </div>
        <div class="gender-item">
          <div class="gender-title">女</div>
          <div class="gender-number">{{ female }}</div>
          <dv-percent-pond
            :config="femaleconfig"
            style="width: 200px; height: 30px"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TotalPeople",
  data() {
    return {
      total: 1300,
      male: 800,
    };
  },
  computed: {
    maleConfig() {
      return {
        value: ((this.male / this.total) * 100).toFixed(),
      };
    },
    femaleconfig() {
      return {
        value: ((this.female / this.total) * 100).toFixed(),
      };
    },
    female() {
      return this.total - this.male;
    },
    totalPepleArr() {
      return this.numberToArray(this.total);
    },
  },
  methods: {
    numberToArray(num) {
      let arr = [];
      // 数字转数组 1234567890 -> [1,2,3,4,5,6,7,8,9,0]
      for (let i = 0; i < num.toString().length; i++) {
        arr.push(parseInt(num.toString()[i]));
      }
      // 数组不足4位，补0
      while (arr.length < 4) {
        arr.unshift(0);
      }
      return arr;
    },
  },
  mounted() {
    // 假数据
    setInterval(() => {
      let increase = Math.floor(Math.random() * 50);
      this.total = this.total + increase;
      let random = Math.floor(Math.random() * 2);
      if (random === 0) {
        this.male = this.male + increase;
      }
    }, 1000);
  },
};
</script>

<style scoped lang="scss">
.total-people {
  padding: 2rem;
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-title {
      font-size: 2rem;
    }
    margin-bottom: 2rem;
  }
  .total-number {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    .number {
      display: flex;
      justify-content: center;
      align-items: center;
      .number-item {
        width: 3.6rem;
        height: 3.6rem;
        margin: 0 0.5rem;
        font-size: 2.2rem;
        font-weight: bold;
        color: #08e5ff;
        text-align: center;
        line-height: 3.5rem;
        background-color: rgba($color: #2862b7, $alpha: 0.4);
      }
    }
  }
  .gender {
    padding: 2rem;
    .gender-label {
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }
    .gender-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .gender-item {
        display: flex;
        align-items: center;
        .gender-title {
          font-size: 1.6rem;
          margin-right: 1rem;
        }
        .gender-number {
          font-size: 1.8rem;
          font-weight: bold;
          color: #08e5ff;
        }
        .dv-percent-pond {
          margin-left: 1rem;
        }
      }
    }
  }
}
</style>